<template>
  <!--    地图弹窗开始-->
  <!--    地图弹窗开始-->
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="1550px"
    @close="resetDialog">
    <el-date-picker
      v-model="dateRange"
      value-format="yyyy-MM-dd"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <el-button @click="fetchDataByDate">查询</el-button>
    <!--    <canvas id="myCanvas" width="1200" height="565.6"></canvas>-->
    <canvas id="myCanvas" width="1500" height="680"></canvas>
    <!--    800 565.6-->
  </el-dialog>
  <!--    地图弹窗结束-->
</template>

<script>
export default {
  name: 'poshistory',
  data(){
    return {
      dataForm: {
        key: ''
      },
      dateRange: [],
      datajson: [],
      dataList: [],
      dataX: [],
      dataY: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      Visiable: false,
      dialogVisible:false
    }
  },
  methods:{
    fetchDataByDate(){
      console.log(this.dateRange)
      this.$http({
        url: this.$http.adornUrl('/labelhistory/labelhistoryinfo/listByDate'),
        method: 'get',
        async: false,
        params: this.$http.adornParams({
          'key': this.dataForm.key,
          'startDate': this.dateRange[0],
          'endDate': this.dateRange[1]
        })
      }).then(({data}) => {
        if (data) {
          this.datajson = data;
          console.log(this.datajson);
          this.drawTrack();
        } else {
          this.datajson = [];
        }
      });
    },
    // 3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
    init(cardId){
      this.dialogVisible = true;
      console.log('子组件employeeId为' + cardId)
      this.dataForm.key = cardId;
      this.$http({
        url: this.$http.adornUrl('/labelhistory/labelhistoryinfo/list'),
        method: 'get',
        async: false,
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'key': this.dataForm.key
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.datajson = data.page.records
          console.log(this.datajson)
          this.drawTrack();
        } else {
          this.datajson = []
        }
      })
    },
    drawTrack(){
      var c = document.getElementById('myCanvas');
      const img = new Image();
      const ctx = c.getContext('2d');
      // 动手
      // img.src = 'static/images/3.jpg';
      img.src = 'static/images/big2.png';
      // 当图片加载完再动手
      img.onload  = () => {
        // 画布大小和图片尺寸不一样算好比例
        const cWidth = c.width;
        const cHeight = c.height;
        const imgWidth = img.naturalWidth;
        const imgHeight = img.naturalHeight;
        const zoom = {
          width: cWidth / imgWidth,
          height: cHeight / imgHeight
        };
        // 以图画底
        ctx.drawImage(img, 0, 0, cWidth, cHeight);
        const points = this.datajson.map(item => {
          return {
            x: item.labelPosX,
            y: item.labelPosY
          };
        });


        // 绘制动态曲线
        var currentIndex = 0;
        var progress = 0;

        function drawCurve() {
          ctx.clearRect(0, 0, c.width, c.height);

          // 绘制图片
          ctx.drawImage(img, 0, 0, cWidth, cHeight);

          // 绘制已完成的线段
          for (var i = 0; i < currentIndex; i++) {
            var startPoint = points[i];
            var endPoint = points[i + 1];

            ctx.beginPath();
            ctx.moveTo(startPoint.x, startPoint.y);
            ctx.lineTo(endPoint.x, endPoint.y);
            ctx.strokeStyle = "red";
            ctx.lineWidth = 2;
            ctx.stroke();
          }

          // 计算动态曲线的点坐标
          var startPoint = points[currentIndex];
          var endPoint = points[currentIndex + 1];

          var x = startPoint.x + (endPoint.x - startPoint.x) * progress;
          var y = startPoint.y + (endPoint.y - startPoint.y) * progress;

          // 绘制动态曲线
          ctx.beginPath();
          ctx.moveTo(startPoint.x, startPoint.y);
          ctx.lineTo(x, y);
          ctx.strokeStyle = "red";
          ctx.lineWidth = 2;
          ctx.stroke();

          progress += 0.01;
          if (progress > 1) {
            progress = 0;
            currentIndex++;
            if (currentIndex >= points.length - 1) {
              cancelAnimationFrame(animationFrameId);
            }
          }

          animationFrameId = requestAnimationFrame(drawCurve);
        }

        var animationFrameId = null;
        drawCurve();

        // 清除动画帧
        this.$once("hook:beforeDestroy", () => {
          cancelAnimationFrame(animationFrameId);
        });
      }
    },
    resetDialog(){
      this.dataForm.key = '';
      this.dateRange = [];
      this.datajson = [];
      this.dataList = [];
      this.dataX = [];
      this.dataY = [];
      this.dataListLoading = false;
      this.dataListSelections = [];
    }
  }
}
</script>

<style scoped>

</style>
